<template>
  <div>
    <SearchForm
        @search="onSearch"
        @reset="onReset"
        :search-list="searchList"
        :search-params="searchParams">
    </SearchForm>

    <div class="operation-box">
      <el-button type="primary" icon="el-icon-plus" @click="onAdd">新增资源</el-button>
    </div>

    <el-table
      v-loading="loading"
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        prop="title"
        label="资源标题"
        min-width="200">
        <template slot-scope="scope">
          <el-link type="primary" @click="onView(scope.row)">{{ scope.row.title }}</el-link>
        </template>
      </el-table-column>
      <el-table-column
        prop="type"
        label="资源类型"
        width="100">
        <template slot-scope="scope">
          <el-tag :type="getResourceTypeTag(scope.row.type)">{{ getResourceTypeName(scope.row.type) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="domain"
        label="专业领域"
        width="100">
        <template slot-scope="scope">
          {{ getDomainName(scope.row.domain) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="level"
        label="难度等级"
        width="100">
        <template slot-scope="scope">
          <el-rate
            v-model="scope.row.level"
            disabled
            show-score
            text-color="#ff9900"
            score-template="{value}">
          </el-rate>
        </template>
      </el-table-column>
      <el-table-column
          prop="resourceTotalTime"
          label="总时长（秒）"
          width="100">
      </el-table-column>
      <el-table-column
        prop="viewCount"
        label="浏览次数"
        width="100">
      </el-table-column>
      <el-table-column
        prop="downloadCount"
        label="下载次数"
        width="100">
      </el-table-column>
      <el-table-column
        label="操作"
        width="160"
        fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleDownload(scope.row)">下载</el-button>
          <el-button
            size="mini"
            type="text"
            @click="onEdit(scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="text"
            style="color: #F56C6C"
            @click="onDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchParams.current"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="searchParams.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

    <Add ref="addFormRef" @success="getList" />
  </div>
</template>

<script>
import { http } from "@/api";
import Add from "./add";

export default {
  name: "LearningResourceIndex",
  components: {
    Add
  },
  data() {
    return {
      loading: false,
      tableData: [],
      total: 0,
      searchList: [
        {
          label: '资源标题',
          prop: 'title',
          name: 'input',
          placeholder: '请输入资源标题'
        },
        {
          label: '资源类型',
          prop: 'type',
          name: 'select',
          options: [
            { label: '文档', value: 1 },
            { label: '视频', value: 2 },
            { label: '音频', value: 3 },
            { label: '图片', value: 4 },
            { label: '链接', value: 5 }
          ]
        },
        {
          label: '专业领域',
          prop: 'domain',
          name: 'select',
          options: [
            { label: '铁道工程', value: 1 },
            { label: '信号控制', value: 2 },
            { label: '机车车辆', value: 3 }
          ]
        }
      ],
      searchParams: {
        current: 1,
        size: 10,
        title: '',
        type: '',
        domain: ''
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getResourceTypeName(type) {
      const types = {
        1: '文档',
        2: '视频',
        3: '音频',
        4: '图片',
        5: '链接'
      }
      return types[type] || '-'
    },
    getResourceTypeTag(type) {
      const tags = {
        1: '',
        2: 'success',
        3: 'warning',
        4: 'info',
        5: 'danger'
      }
      return tags[type] || ''
    },
    getDomainName(domain) {
      const domains = {
        1: '铁道工程',
        2: '信号控制',
        3: '机车车辆'
      }
      return domains[domain] || '-'
    },
    handleSizeChange(val) {
      this.searchParams.size = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.searchParams.current = val
      this.getList()
    },
    onSearch(params) {
      this.searchParams = {
        ...this.searchParams,
        ...params
      }
      this.getList()
    },
    onReset() {
      this.searchParams = {
        current: 1,
        size: 10,
        title: '',
        type: '',
        domain: ''
      }
      this.getList()
    },
    onAdd() {
      this.$refs.addFormRef.open()
    },
    onEdit(row) {
      this.$refs.addFormRef.open(row)
    },
    onView(row) {
      http.resource.increaseView(row.id).then(() => {
        this.$router.push({
          path: '/learning-detail/' + row.id,
        })
        this.onSearch()
      })
    },
    onDelete(row) {
      this.$confirm('确认删除该资源吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        http.resource.delete(row.id).then(() => {
          this.$message.success('删除成功')
          this.getList()
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    handleDownload(row) {
      http.resource.increaseDownload(row.id).then(() => {
        window.open(row.path, '_blank')
        this.onSearch()
      })
    },
    getList() {
      this.loading = true
      http.resource.page(this.searchParams).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.operation-box {
  margin: 20px 0;
  text-align: right;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

.el-table {
  .el-rate {
    height: 20px;
    line-height: 20px;
  }
}

.el-button + .el-button {
  margin-left: 5px;
}
</style>
